<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="order by dede58.com" name="author"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Float-Admin</title>

    <!-- Common plugins -->
    <link href="../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/simple-line-icons.css" rel="stylesheet">
    <link href="../../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../static/css/pace.css" rel="stylesheet">
    <link href="../../static/css/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/nanoscroller.css" rel="stylesheet">
    <link href="../../static/css/metismenu.min.css" rel="stylesheet">
    <link href="../../static/css/jquery-ui.css" rel="stylesheet">
    <!--template css-->
    <link href="../../static/css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../../static/js/html5shiv.min.js"></script>
    <script src="../../static/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<!--top bar start-->
<div class="top-bar light-top-bar"><!--by default top bar is dark, add .light-top-bar class to make it light-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6">
                <a class="admin-logo" href="index.html">
                    <h1><img alt="" src="../../static/picture/logo-dark.png"></h1>
                </a>
                <div class="left-nav-toggle visible-xs visible-sm">
                    <a href="">
                        <i class="glyphicon glyphicon-menu-hamburger"></i>
                    </a>
                </div><!--end nav toggle icon-->
                <!--start search form-->
                <div class="search-form hidden-xs">
                    <form>
                        <input class="form-control" placeholder="Search for..." type="text">
                        <button class="btn-search" type="button"><i class="fa fa-search"></i></button>
                    </form>
                </div>
                <!--end search form-->
            </div>
            <div class="col-xs-6">
                <ul class="list-inline top-right-nav">
                    <li class="dropdown hidden-xs icon-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="glyphicon glyphicon-envelope"></i>
                            <span class="badge badge-warning">4</span>
                        </a>
                        <ul class="dropdown-menu top-dropdown lg-dropdown notification-dropdown">
                            <li>
                                <div class="dropdown-header"><a class="pull-right text-muted" href="#"><small>View
                                    All</small></a> Messages
                                </div>
                                <div class="scrollDiv">

                                    <div class="notification-list">
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-2.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">John Doe <label
                                                    class="label label-primary pull-right">Office</label></span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-3.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Emily Doe  <label
                                                    class="label label-info pull-right">Marketing</label></span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-4.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Michael Clark <label
                                                    class="label label-warning pull-right">Support</label> </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-5.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Ronaldo <label
                                                    class="label label-success pull-right">Metting</label> </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </li>
                    <li class="dropdown hidden-xs icon-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="glyphicon glyphicon-bell"></i>
                            <span class="badge badge-danger">6</span>
                        </a>
                        <ul class="dropdown-menu top-dropdown lg-dropdown notification-dropdown">
                            <li>
                                <div class="dropdown-header"><a class="pull-right text-muted" href="#"><small>View
                                    All</small></a> Notifications
                                </div>
                                <div class="scrollDiv">
                                    <div class="notification-list">
                                        <a class="clearfix" href="javascript: void(0);">
                                            <span class="notification-icon"><i
                                                    class="icon-cloud-upload text-primary"></i></span>
                                            <span class="notification-title">Upload Complete</span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                            <span class="notification-icon"><i
                                                    class="icon-info text-warning"></i></span>
                                            <span class="notification-title">Storage Space low</span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                            <span class="notification-icon"><i
                                                    class="icon-check text-success"></i></span>
                                            <span class="notification-title">Project Task Complete </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="right-sidebar-toggle" href="javascript: void(0);"><i
                                class="glyphicon glyphicon-align-right"></i></a>
                    </li>
                    <li class="dropdown avtar-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <img alt="" class="img-circle" src="../../static/picture/avtar-1.jpg" width="30">

                        </a>
                        <ul class="dropdown-menu top-dropdown">
                            <li><a href="javascript: void(0);"><i class="icon-bell"></i> Activities</a></li>
                            <li><a href="javascript: void(0);"><i class="icon-user"></i> Profile</a></li>
                            <li><a href="javascript: void(0);"><i class="icon-settings"></i> Settings</a></li>
                            <li class="divider"></li>
                            <li><a href="javascript: void(0);"><i class="icon-logout"></i> Logout</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</div>
<!-- top bar end-->

<!--right side bar panel-->
<nav class="right_sidebar" id="right-sidebar-toggle">
    <div class="nano">
        <div class="nano-content">
            <div>
                <!-- Nav tabs -->
                <ul class="list-inline nav-tab-panel clearfix" role="tablist">
                    <li class="active" role="presentation"><a aria-controls="projects" data-toggle="tab"
                                                              href="#projects"
                                                              role="tab">Projects</a></li>
                    <li role="presentation"><a aria-controls="contacts" data-toggle="tab" href="#contacts" role="tab">Contacts</a>
                    </li>

                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="projects" role="tabpanel">
                        <ul class="sidebar-list">
                            <li class="sidebar-title">
                                <h3 class="font-100"> Current projects</h3>
                                <small>There are <strong>7</strong> Current project</small>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>YII with material design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 42%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-warning" style="width: 42%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>HTML to AngularJs</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 12%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-danger" style="width: 12%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success pull-right">Company</span>
                                    <h4>Website Re-design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 84%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-success" style="width: 84%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success pull-right">Metting</span>
                                    <h4>Business Consultancy</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 54%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-info" style="width: 54%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>YII with material design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 42%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-warning" style="width: 42%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>HTML to AngularJs</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 12%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-danger" style="width: 12%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane" id="contacts" role="tabpanel">

                        <ul class="list-unstyled sidebar-contact-list">
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-1.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Angelina</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-2.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>John doe</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-danger circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-3.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Eluga Smith</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-4.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Jonathan Doe</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-5.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Angelina</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li>
                                <div class=" text-center">
                                    <!-- Optional link to list more users-->
                                    <a class="btn btn-teal" href="javascript:void(0);" title="See more contacts">
                                        Load more..
                                    </a>
                                </div>
                            </li>
                        </ul><!--end sidebar contacts-list-->
                    </div>
                </div>

            </div>
        </div>
    </div>
</nav>
<!--end right side bar panel-->

<!--left navigation start-->
<aside class="float-navigation light-navigation">
    <div class="nano">
        <div class="nano-content">
            <ul class="metisMenu nav" id="menu">
                <li class="nav-heading"><span>Main Navigation</span></li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-home"></i> Dashboard <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="index.html">Dashboard Alpha</a></li>
                        <li><a href="index-beta.html">Dashboard beta</a></li>

                    </ul>
                </li>
                <li><a href="widgets.html"><i class="fa fa-diamond"></i> Widgets </a></li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-handbag"></i> E-commerce <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="ecommerce-dashboard.jsp">Dashboard</a></li>
                        <li><a href="ecommerce-products.jsp">products</a></li>
                        <li><a href="ecommerce-orders.jsp">orders</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-envelope-letter"></i> Mail <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="mail-index.html">Inbox</a></li>
                        <li><a href="mail-view.html">Inbox view</a></li>
                        <li><a href="mail-compose.html">Compose</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-grid"></i> Layouts <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="layout-sidebar-topbar-dark.html">Sidebar +Topbar Dark</a></li>
                        <li><a href="layout-sidebar-colored.html">Sidebar Colored</a></li>
                        <li><a href="layout-horizontal.html">Horizontal</a></li>

                        <li><a href="layout-dashboard-only.html">Dashboard Only</a></li>
                    </ul>
                </li>
                <li class="nav-heading"><span>Components</span></li>
                <li><a href="jquery-ui-elements.html"><i class="icon-wrench"></i> Jquery UI Elements</a></li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-settings"></i> UI elements <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="false" class="nav-second-level nav">
                        <li><a href="ui-typography.html">Typography</a></li>
                        <li><a href="ui-icons.html">Icons</a></li>
                        <li><a href="ui-panels.html">Panels</a></li>
                        <li><a href="ui-buttons.html">Buttons</a></li>
                        <li><a href="ui-tabs.html">tabs</a></li>
                        <li><a href="ui-tip-pop.html">Tooltip & Popovers</a></li>
                        <li><a href="ui-alerts.html">Alerts</a></li>
                        <li><a href="ui-modals.html">modals</a></li>
                        <li><a href="ui-grid.html">grid system</a></li>
                        <li><a href="ui-carousel.html">Carousel</a></li>
                        <li><a href="ui-sweetalerts.html">Sweet alters</a></li>
                        <li><a href="ui-alertify.html">Alertify Alters</a></li>
                        <li><a href="ui-sliders.html">Sliders</a></li>
                        <li><a href="ui-nestable.html">Nestable</a></li>
                        <li><a href="ui-date-time-picker.html">Date time pickers</a></li>
                        <li><a href="ui-treeview.html">Tree view</a></li>
                        <li><a href="ui-draggable-panels.html">Draggable Panels</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-pencil"></i> Forms <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="form-basic.html">Basic elements</a></li>
                        <li><a href="form-file-upload.html">File upload</a></li>
                        <li><a href="form-editor.html">text editor</a></li>
                        <li><a href="form-wizard.html">Form Wizard</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-bar-chart"></i> Charts <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="chart-flot.html">Flot</a></li>
                        <li><a href="chart-morris.html">Morris</a></li>
                        <li><a href="chart-radial.html">Radial</a></li>
                        <li><a href="chart-c3.html">C3</a></li>
                        <li><a href="chart-sparkline.html">Sparkline</a></li>
                        <li><a href="chart-rickshaw.html">rickshaw</a></li>
                        <li><a href="chart-chartjs.html">ChartJs</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-list"></i> Tables <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="table-basic.html">Basic tables</a></li>
                        <li><a href="table-data.html">Data tables</a></li>
                        <li><a href="table-foo.html">Foo tables</a></li>

                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-map"></i> Maps <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="map-vector.html">Vector map</a></li>
                        <li><a href="map-google.html">Google map</a></li>
                    </ul>
                </li>
                <li class="nav-heading"><span>More</span></li>
                <li class="active">
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-folder"></i> Pages <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="page-empty.html">Empty page</a></li>
                        <li><a href="page-lockscreen.html">Lock-screen</a></li>
                        <li><a href="../../page-login.jsp">Login</a></li>
                        <li><a href="page-register.html">Register</a></li>
                        <li><a href="page-forget-password.html">Forget Password</a></li>
                        <li><a href="../../404.jsp">404</a></li>
                        <li><a href="page-gallery.html">Gallery</a></li>
                        <li><a href="page-timeline.html">Timeline</a></li>
                        <li><a href="page-invoice.html">Invoice</a></li>
                        <li><a href="page-profile.html">Profile</a></li>
                        <li><a href="page-calendar.html">Calendar</a></li>
                        <li><a href="page-chat-room.html">Chat room</a></li>
                        <li><a href="page-faqs.html">Faqs</a></li>
                        <li><a href="page-pricing.html">Pricing</a></li>
                        <li><a href="page-contacts.html">Contacts</a></li>
                        <li><a href="page-blog.html">Blog</a></li>
                        <li><a href="page-blog-article.html">Blog article</a></li>

                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-folder-alt"></i> Nested menu
                        <span class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="javascript: void(0);">Level 1</a></li>
                        <li><a aria-expanded="true" href="javascript: void(0);">Level 2 <span
                                class="fa arrow"></span></a>
                            <ul aria-expanded="true" class="nav-third-level nav">
                                <li><a href="javascript: void(0);">Level 2</a></li>
                                <li><a href="javascript: void(0);">Level 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <!--<li><a href="landing/home.html" target="_blank" class="bg-primary"><i class="icon-star"></i>Landing page</a></li>-->
            </ul>
        </div><!--nano content-->
    </div><!--nano scroll end-->
</aside>
<!--left navigation end-->


<!--main content start-->
<section class="main-content">


    <!--page header start-->
    <div class="page-header">
        <div class="row">
            <div class="col-sm-6">
                <h4>Juqery UI Elements</h4>
            </div>
            <div class="col-sm-6 text-right">
                <ol class="breadcrumb">
                    <li><a href="javascript: void(0);"><i class="fa fa-home"></i></a></li>
                    <li>jquery UI</li>
                    <li>Elements</li>
                </ol>
            </div>
        </div>
    </div>
    <!--page header end-->


    <!--start page content-->

    <!--select box-->
    <div class="row">
        <div class="col-sm-12">
            <h3 class="font-300 margin-b-20">Jquery UI Select boxes</h3>
            <div class="row">
                <div class="col-sm-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-4">
                                    <fieldset class="jquery-Ui-fieldset">
                                        <label for="simple">Default style</label>
                                        <select id="simple" name="simple">
                                            <option>Slower</option>
                                            <option>Slow</option>
                                            <option selected="selected">Medium</option>
                                            <option>Fast</option>
                                            <option>Faster</option>
                                        </select>
                                    </fieldset>
                                </div><!--end col-->
                                <div class="col-sm-4">
                                    <fieldset class="jquery-Ui-fieldset">
                                        <label for="optgroup">Option groups</label>
                                        <select id="optgroup" name="optgroup">
                                            <optgroup label="Mountain Time Zone">
                                                <option value="AZ">Arizona</option>
                                                <option value="CO">Colorado</option>
                                                <option value="ID">Idaho</option>
                                                <option value="WY">Wyoming</option>
                                            </optgroup>
                                            <optgroup label="Central Time Zone">
                                                <option value="AL">Alabama</option>
                                                <option value="AR">Arkansas</option>
                                                <option value="KS">Kansas</option>
                                                <option value="KY">Kentucky</option>
                                            </optgroup>
                                            <optgroup label="Eastern Time Zone">
                                                <option value="CT">Connecticut</option>
                                                <option value="FL">Florida</option>
                                                <option value="MA">Massachusetts</option>
                                                <option value="WV">West Virginia</option>
                                            </optgroup>
                                        </select>
                                    </fieldset>
                                </div><!--end col-->
                                <div class="col-sm-4">
                                    <fieldset class="jquery-Ui-fieldset">
                                        <label for="disabled">Disabled style</label>
                                        <select disabled="disabled" id="disabled" name="disabled">
                                            <option>Slower</option>
                                            <option>Slow</option>
                                            <option selected="selected">Medium</option>
                                            <option>Fast</option>
                                            <option>Faster</option>
                                        </select>
                                    </fieldset>
                                </div><!--end col-->
                            </div><!--end row-->
                            <div class="row">
                                <div class="col-sm-4">
                                    <fieldset class="jquery-Ui-fieldset">
                                        <label for="select-icons">With custom icons</label>
                                        <select id="select-icons" name="select-icons">
                                            <optgroup label="Browsers">
                                                <option data-icon="fa-chrome" selected="selected" value="chrome">
                                                    Chrome
                                                </option>
                                                <option data-icon="fa-firefox" value="firefox">Firefox</option>
                                                <option data-icon="fa-safari" value="safari">Safari</option>
                                                <option data-icon="fa-opera" value="opera">Opera</option>
                                                <option data-icon="fa-internet-explorer" value="IE">IE</option>
                                            </optgroup>
                                        </select>
                                    </fieldset>
                                </div>
                                <div class="col-sm-4">
                                    <fieldset class="jquery-Ui-fieldset">
                                        <label for="people">Select a Person:</label>
                                        <select id="people" name="people">
                                            <option data-class="avatar"
                                                    data-style="background-image: url(images/f607a6e240c34fcaa8e1f53f2dfd70af.gif);"
                                                    value="1">
                                                John Resig
                                            </option>
                                            <option data-class="avatar"
                                                    data-style="background-image: url(images/138f5526059d4b6e81d02f6410463b70.gif);"
                                                    value="2">
                                                Tauren Mills
                                            </option>
                                            <option data-class="avatar"
                                                    data-style="background-image: url(images/529412e9550a47d98ea4e8f93892eb43.gif);"
                                                    value="3">
                                                Jane Doe
                                            </option>
                                        </select>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Drag & drop-->
    <div class="row">
        <div class="col-sm-12">
            <h3 class="font-300 margin-b-20">Drag & Drop UI</h3>
            <h5 class="text-capitalize font-400 text-muted margin-b-10">Draggables</h5>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default" id="drag-default">
                        <div class="panel-heading">
                            Default functionality
                        </div>
                        <div class="panel-body">
                            <p>
                                Enable draggable functionality on any DOM element. Move the draggable object by clicking
                                on it with the mouse and dragging it anywhere within the viewport.
                            </p>
                            <div class=" draggable-element draggable-default"><span>Drag</span></div>
                            <div class=" draggable-element draggable-default"><span>Drag</span></div>
                            <div class=" draggable-element draggable-default"><span>Drag</span></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default" id="drag-cursor">
                        <div class="panel-heading">
                            Cursor style
                        </div>
                        <div class="panel-body">
                            <p>Position the cursor while dragging the object. Use the <code>cursorAt</code> option to
                                specify another location relative to the draggable (specify a pixel value from the top,
                                right, bottom, and/or left).</p>
                            <div class="draggable-element" id="draggable-cursor-move"><span>Move</span></div>
                            <div class="draggable-element" id="draggable-cursor-crosshair"><span>Crosshair</span></div>
                            <div class="draggable-element" id="draggable-cursor-bottom"><span>Bottom</span></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default" id="drag-constrain">
                        <div class="panel-heading">
                            Constrain movement
                        </div>
                        <div class="panel-body">
                            <p>Constrain the movement of each draggable by defining the boundaries of the draggable
                                area. Set the <code>axis</code> option to limit the draggable's path to the x- or
                                y-axis, or use the <code>containment</code> option to specify a parent DOM element or a
                                jQuery selector, like 'document.'</p>
                            <div class="draggable-element" id="draggable-move-both"><span>Both</span></div>
                            <div class="draggable-element" id="draggable-move-vertical"><span>Vertical</span></div>
                            <div class="draggable-element" id="draggable-move-horizontal"><span>Horizontal</span></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default" id="drag-revert">
                        <div class="panel-heading">
                            Revert position
                        </div>
                        <div class="panel-body">
                            <p>Return the draggable (or it's helper) to its original location when dragging stops with
                                the boolean <code>revert</code> option.</p>
                            <div class="draggable-element" id="draggable-revert-element"><span>Element</span></div>
                            <div class="draggable-element" id="draggable-revert-clone"><span>Clone</span></div>
                            <div class="draggable-element" id="draggable-revert-speed"><span>Speed</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <h5 class="text-capitalize font-400 text-muted margin-b-10">Droppables</h5>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default" id="drop-default">
                        <div class="panel-heading">
                            Default functionality
                        </div>
                        <div class="panel-body">
                            <p>
                                Enable any DOM element to be droppable, a target for draggable elements.
                            </p>
                            <div class="draggable-element" id="droppable-basic-element"><span>Drag me</span></div>
                            <div class="draggable-element droppable-target-element" id="droppable-basic-target"><span>Drop here</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default" id="drop-accept">
                        <div class="panel-heading">
                            Accept not accept
                        </div>
                        <div class="panel-body">
                            <p>Specify using the <code>accept</code> option which element (or group of elements) is
                                accepted by the target droppable.</p>
                            <div class="draggable-element" id="droppable-accept-yes"><span>Accept</span></div>
                            <div class="draggable-element" id="droppable-accept-no"><span>Not accept</span></div>
                            <div class="draggable-element droppable-target-element" id="droppable-accept-target"><span>Drop here</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end drag & drop-->

    <!--Modal dialogs-->
    <div class="row">
        <div class="col-sm-12">
            <h3 class="font-300">Modal Dialogs</h3>
            <div class="row">
                <div class="col-sm-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Modal dialog
                        </div>
                        <div class="panel-body">

                            <div class="table-responsive row">
                                <table class="table table-striped">
                                    <tr>
                                        <td style="width: 30%">
                                            Basic modal example
                                        </td>
                                        <td>
                                            <!--dialog buttons-->
                                            <button class="btn btn-default" id="dialog-basic-opener" type="button">
                                                Launch
                                            </button>
                                            <!--/dialog buttons-->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 30%">
                                            Overlay modal example
                                        </td>
                                        <td>
                                            <!--dialog buttons-->
                                            <button class="btn btn-default" id="dialog-overlay-opener" type="button">
                                                Launch
                                            </button>
                                            <!--/dialog buttons-->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 30%">
                                            Animated modal example
                                        </td>
                                        <td>
                                            <!--dialog buttons-->
                                            <button class="btn btn-default" id="dialog-animated-opener" type="button">
                                                Launch
                                            </button>
                                            <!--/dialog buttons-->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 30%">
                                            Buttons modal example
                                        </td>
                                        <td>
                                            <!--dialog buttons-->
                                            <button class="btn btn-default" id="dialog-buttons-opener" type="button">
                                                Launch
                                            </button>
                                            <!--/dialog buttons-->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 30%">
                                            Disable drag modal example
                                        </td>
                                        <td>
                                            <!--dialog buttons-->
                                            <button class="btn btn-default" id="dialog-drag-disabled-opener"
                                                    type="button">Launch
                                            </button>
                                            <!--/dialog buttons-->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 30%">
                                            Form modal example
                                        </td>
                                        <td>
                                            <!--dialog buttons-->
                                            <button class="btn btn-default" id="dialog-form-opener" type="button">
                                                Launch
                                            </button>
                                            <!--/dialog buttons-->
                                        </td>
                                    </tr>
                                </table>
                            </div>

                            <!-- Basic dialog -->
                            <div id="dialog-basic" title="Basic dialog">
                                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
                                    facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
                                    vestibulum at eros.</p>
                                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
                                    lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            </div>
                            <!-- /basic dialog -->
                            <!-- overlay dialog -->
                            <div id="dialog-overlay" title="Overlay dialog">
                                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
                                    facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
                                    vestibulum at eros.</p>
                                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
                                    lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            </div>
                            <!-- /Overlay dialog -->
                            <!-- animated dialog -->
                            <div id="dialog-animated" title="Animated dialog">
                                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
                                    facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
                                    vestibulum at eros.</p>
                                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
                                    lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            </div>
                            <!-- /animated dialog -->
                            <!-- Dialog with buttons -->
                            <div id="dialog-buttons" title="Dialog with buttons">
                                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
                                    facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
                                    vestibulum at eros.</p>
                                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
                                    lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            </div>
                            <!-- /dialog with buttons -->
                            <!-- Disable drag -->
                            <div id="dialog-drag-disabled" title="Disable drag">
                                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
                                    facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
                                    vestibulum at eros.</p>
                                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
                                    lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            </div>
                            <!-- /disable drag -->
                            <!-- Vertical form -->
                            <div id="dialog-form" title="Vertical form">
                                <form action="#">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <label>First name</label>
                                                <input class="form-control" placeholder="Eugene" type="text">
                                            </div>

                                            <div class="col-sm-6">
                                                <label>Last name</label>
                                                <input class="form-control" placeholder="Kopyov" type="text">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <label>Address line 1</label>
                                                <input class="form-control" placeholder="124, Munna Wali" type="text">
                                            </div>

                                            <div class="col-sm-6">
                                                <label>Address line 2</label>
                                                <input class="form-control" placeholder="Niwaru Road, Jhotwara"
                                                       type="text">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <label>City</label>
                                                <input class="form-control" placeholder="jaipur" type="text">
                                            </div>

                                            <div class="col-sm-4">
                                                <label>State/Province</label>
                                                <input class="form-control" placeholder="Rajsthan" type="text">
                                            </div>

                                            <div class="col-sm-4">
                                                <label>ZIP code</label>
                                                <input class="form-control" placeholder="302012" type="text">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <label>Email</label>
                                                <input class="form-control" placeholder="support@support.com"
                                                       type="text">
                                                <span class="help-block">support@support.com</span>
                                            </div>

                                            <div class="col-sm-6">
                                                <label>Phone #</label>
                                                <input class="form-control" data-mask="+99-99-9999-9999"
                                                       placeholder="+99-99-9999-9999" type="text">
                                                <span class="help-block">+91-12-1234-5678</span>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- /vertical form -->
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!--accordions-->
    <div class="row">
        <div class="col-sm-12">
            <h3 class="font-300">Accordions</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Default functionality
                        </div>
                        <div class="panel-body">
                            <p>
                                Click headers to expand/collapse content that is broken into logical sections, much like
                                tabs. Optionally, toggle sections open/closed on mouseover.
                            </p>
                            <div id="accordion">
                                <h3>Section 1</h3>
                                <div>
                                    <p>
                                        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                                        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                                        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                                        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                                    </p>
                                </div>
                                <h3>Section 2</h3>
                                <div>
                                    <p>
                                        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                                        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                                        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                                        suscipit faucibus urna.
                                    </p>
                                </div>
                                <h3>Section 3</h3>
                                <div>
                                    <p>
                                        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                                        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                                        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                                        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
                                    </p>
                                    <ul>
                                        <li>List item one</li>
                                        <li>List item two</li>
                                        <li>List item three</li>
                                    </ul>
                                </div>
                                <h3>Section 4</h3>
                                <div>
                                    <p>
                                        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
                                        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
                                        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
                                        mauris vel est.
                                    </p>
                                    <p>
                                        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
                                        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                                        inceptos himenaeos.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Hover panels
                        </div>
                        <div class="panel-body">
                            <p>
                                Show panels on hover
                            </p>
                            <div id="accordion-hover">
                                <h3>Section 1</h3>
                                <div>
                                    <p>
                                        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                                        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                                        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                                        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                                    </p>
                                </div>
                                <h3>Section 2</h3>
                                <div>
                                    <p>
                                        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                                        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                                        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                                        suscipit faucibus urna.
                                    </p>
                                </div>
                                <h3>Section 3</h3>
                                <div>
                                    <p>
                                        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                                        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                                        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                                        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
                                    </p>
                                    <ul>
                                        <li>List item one</li>
                                        <li>List item two</li>
                                        <li>List item three</li>
                                    </ul>
                                </div>
                                <h3>Section 4</h3>
                                <div>
                                    <p>
                                        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
                                        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
                                        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
                                        mauris vel est.
                                    </p>
                                    <p>
                                        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
                                        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                                        inceptos himenaeos.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!--selectable-->
    <div class="row">
        <div class="col-sm-6">
            <h3 class="font-300 margin-b-10">Selectable</h3>
            <div class="panel panel-default">
                <div class="panel-body">
                    <ol id="selectable">
                        <li class="ui-widget-content">Item 1</li>
                        <li class="ui-widget-content">Item 2</li>
                        <li class="ui-widget-content">Item 3</li>
                        <li class="ui-widget-content">Item 4</li>
                        <li class="ui-widget-content">Item 5</li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <h3 class="font-300 margin-b-10">Progress bars</h3>
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="ui-progressbar-primary margin-b-10" id="progressbar"></div>
                    <div class="ui-progressbar-teal margin-b-10" id="progressbar2"></div>
                    <div class="ui-progressbar-indigo margin-b-10" id="progressbar3"></div>
                    <div class="ui-progressbar-success margin-b-10" id="progressbar4"></div>
                    <div class="ui-progressbar-warning margin-b-10" id="progressbar5"></div>
                    <div class="ui-progressbar-danger" id="progressbar6"></div>
                </div>
            </div>
        </div>
    </div>

    <!--end page content-->


    <!--Start footer-->
    <footer class="footer">
        <span>Copyright &copy; 2016. Float</span>
    </footer>
    <!--end footer-->

</section>
<!--end main content-->


<!--Common plugins-->
<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script src="../../static/js/pace.min.js"></script>
<script src="../../static/js/jasny-bootstrap.min.js"></script>
<script src="../../static/js/jquery.slimscroll.min.js"></script>
<script src="../../static/js/jquery.nanoscroller.min.js"></script>
<script src="../../static/js/metismenu.min.js"></script>
<script src="../../static/js/float-custom.js"></script>
<!--page script-->
<script src="../../static/js/jquery-ui.min.js"></script>
<script src="../../static/js/jquery.ui.custom.js"></script>
</body>
</html>